<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="商品查看">
<style>
    .hidden {
        display: none;
    }

</style>
<div class="panel">
    <ul class="panel-header row">
        <li>
            <div class="form-actions span12">
                <a href="${basepath}/manage/product/toList" >
                    返回上一级
                </a>
                <a onclick=" changeStatus()" class="editBtn" id="editBtn" style="margin-left: 20px;">
                    编辑
                </a>
            </div>
        </li>
    </ul>
    <form id="editForm" class="form-horizontal panel-body" action="${basepath}/manage/product/updateJson" method="post">
        <input type="hidden" class="control-text span-width span10" name="id" value="${e.id!}">

        <div class="control-group">
            <label class="control-label">
                <s>*</s>
                商品名称：
            </label>

            <div class="controls">
                <input type="text" class="control-text span-width span10" name="name" id="name" placeholder="请输入商品名称"
                       value="${e.name!}" disabled>
            </div>
        </div>
    <#---->
    <#--<div class="control-group">-->
    <#--<label class="control-label">-->
    <#--<s>*</s>-->
    <#--商品类别：-->
    <#--</label>-->

    <#--<div class="controls">-->
    <#--<input type="hidden" id="hide"  name="catalogID" value="${e.catalogID!}">-->
    <#--</div>-->
    <#--</div>-->
    <#---->
        <div class="control-group">
            <label class="control-label">
                <s>*</s>
                一级目录：
            </label>

            <div class="controls">
                <div id="p-catalog">
                    <input type="hidden" id="p-value" name="p-value" value=${e.pCatalog!}>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                <s>*</s>
                二级目录：
            </label>

            <div class="controls">
                <div id="sub-catalog">
                    <input type="hidden" id="sub-value" name="catalogID" value=${e.catalogID!}>
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                <s>*</s>
                商品主图：
            </label>

            <div class="controls" style="height: auto">
                <input type="hidden" name="picture" value="${e.picture}"/>
                <img id="mainPicture" src="${basepath}/${e.picture}"
                     style="max-width: 250px;width: 100%;max-height: 250px;">
                <a id="pictureBtn" class="button button-min button-primary pull-right hidden"
                   style="height:20px;margin-left: 10px;">上传</a>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">
                <s>*</s>
                商品详情：
            </label>

            <div class="controls control-row4" style="height: 350px;">
                <textarea type="text" class="input-large" name="productHTML"
                          id="productHTML" ${e.productHTML!}></textarea>
            </div>
        </div>
        <div class="control-group">
            <h3 class="control-label" id="imgs">商品图片
            <input type="hidden" name="images" value="${e.images!}"/>
            </h3>
                <div class="controls"  style="height: auto;max-width: 1000px;" >
                <div id="imgBox"></div>
                </div>
            <a class="button button-primary pull-right hidden" id="imagesBtn" style="height:20px">上传图片</a>
        </div>
        <div class="control-group">
            <div id="imagesGrid" class="xm-grid">
            </div>
        </div>
        <div id="grid"></div>
    </form>
    <div id="editSpecContent" style="display:none;">
        <form id="editSpecForm" class="form-horizontal" action="${basepath}/manage/product/updateSpec" method="post">
            <input type="hidden" name="id">
            <input type="hidden" name="productID">

            <div class="row">
                <div class="control-group span16">
                    <label class="control-label">规格组合：</label>

                    <div class="controls">
                        <input type="text" class="input-normal control-text" name="specCombination"
                               data-rules="{required : true}">
                    </div>
                </div>
                <div class="control-group span16">
                    <label class="control-label">售价：</label>

                    <div class="controls">
                        <input type="text" class="input-normal control-text" name="specNowPrice"
                               data-rules="{required : true}">
                    </div>
                </div>
                <div class="control-group span16">
                    <label class="control-label">进价：</label>

                    <div class="controls">
                        <input type="text" class="input-normal control-text" name="specPurchasePrice">
                    </div>
                </div>
                <div class="control-group span16">
                    <label class="control-label">库存：</label>

                    <div class="controls">
                        <input type="text" class="input-normal control-text" name="specStock"
                               data-rules="{required : true}">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    //    动态创建产品图片标签
    var images = "${e.images!}".split(",");
    var imgHtml = "";
    var imgcount = images.length;
    if (imgcount != 0 && (images != null && images != "")) {
        for (i = 0; i < imgcount; i++) {
            imgHtml = imgHtml + "<span class='imgBox' style='padding-bottom: 5px;'> <input type='hidden'   value='"
                    + images[i] + "'/> <img  src='${basepath}/"
                    + images[i] + "'style='max-width: 250px;width: 100%;max-height: 250px; padding-bottom: 5px;'/>"
                    + "<a class='hidden image'>删除</a> </span>";
        }
        var ospan = document.createElement("span")
        ospan.innerHTML = imgHtml;
        document.getElementById("imgBox").appendChild(ospan);
    }
    var editor = UE.getEditor('productHTML', {readonly: true});
    var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            columns = [
                {title: '规格编号', dataIndex: 'id'},
                {title: '规格组合', dataIndex: 'specCombination'},
                {title: '库存', dataIndex: 'specStock', elCls: 'center'},
                {title: '售价', dataIndex: 'specNowPrice', elCls: 'center'},
                {title: '利润', dataIndex: 'profit', elCls: 'center'},
                {
                    title: '操作', dataIndex: "productID", renderer: function (value, obj, index) {
                    return '<a href="javascript:edit(' + index + ',' + value + ')">编辑</a>';
                }
                }
            ],
    store = new Store({
        url: '/manage/product/getSpec?productID=' +${e.id!},
        autoLoad: true, //自动加载数据
        params: { //配置初始请求的参数
            length: '10',
        },
        pageSize: 10,	// 配置分页数目
        root: 'list',
        totalProperty: 'total'
    }),
            grid = new Grid.Grid({
                render: '#grid',
                columns: columns,
                tbar: {
                    items: [{
                        btnCls: 'button',
                        text: '<i class="icon-plus"></i>添加',
                        listeners: {
                            'click': addFunction
                        }
                    },
                        {
                            btnCls: 'button',
                            text: '<i class="icon-remove"></i>删除',
                            listeners: {
                                'click': delFunction
                            }
                        }]
                },
                plugins: [Grid.Plugins.CheckSelection],
                forceFit: true,
                loadMask: true, //加载数据时显示屏蔽层
                store: store,
            });
    grid.render();
    var catalog;
    function changeStatus() {
        if ($('#editBtn').hasClass('editBtn')) {
            subSelect.enable();
            pSelect.enable();
            $("#editBtn").text("保存");
            $('#editBtn').removeClass('editBtn');
            $('#editBtn').addClass('saveBtn')
            var editForm = new BUI.Form.Form({
                srcNode: '#editForm',
                submitType: 'ajax',
                callback: function () {
                    window.location.reload();
                }
            }).render();
        }
        if ($("#editBtn").text() == "保存") {
            $("#editBtn").click(function () {
                var imageArr = $("span.imgBox").children("input");
                var imageValue = "";
                for (i = 0; i < imageArr.length; i++) {
                    imageValue = imageValue + $(imageArr[i]).val() + ",";
                }
                imageValue = imageValue.substr(0, imageValue.length - 1);
                editForm.setFieldValue("images", imageValue);
//                editForm.setFieldValue("catalogID",catalog);
                editForm.ajaxSubmit();
            })
        }
        editor.setEnabled();
        $(".hidden").removeClass("hidden");
        $("input").removeAttr("disabled");
        /*--------------------------------------------------图片上传配置-------------------------------------------*/
        var pictureUploader = WebUploader.create({
            auto: true,
            swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
            server: '${basepath}/manage/ued/config?action=uploadimage',
            pick: '#pictureBtn',
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
            }
        });

        pictureUploader.on('uploadSuccess', function (file, response) {
            pictureUploader.removeFile(file);
            editForm.setFieldValue("picture", response.url)
            $("#mainPicture").attr("src", "${basepath}/" + response.url);
        });
//        详细图片上传
        var uploader = WebUploader.create({
            auto: true,
            swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
            server: '${basepath}/manage/ued/config?action=uploadimage',
            pick: '#imagesBtn',
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
            }
        });

        uploader.on('uploadSuccess', function (file, response) {
            uploader.removeFile(file);
            var newimg = "<span  class='imgBox'><input type='hidden'   value='"
                    + response.url + "'/><img src='${basepath}/"
                    + response.url + "'style='max-width: 250px;width: 100%;max-height: 250px; padding-bottom: 5px;'/>"
                    + "<a class='image'>删除</a></span>";
            var newimgspan = document.createElement("span")
            newimgspan.innerHTML = newimg;
            document.getElementById("imgBox").appendChild(newimgspan);
        });
    }
    /*----------------------------加载树-----------------------------------*/
    <#--BUI.use(['bui/extensions/treepicker', 'bui/tree', 'bui/data'], function (TreePicker, Tree, Data) {-->
    <#--var store = new Data.TreeStore({-->
    <#--root: {-->
    <#--id: '0',-->
    <#--text: '0'-->
    <#--},-->
    <#--map: {-->
    <#--name: 'text'-->
    <#--},-->
    <#--url: '${basepath}/manage/catalog/selectAll',-->
    <#--autoLoad: true-->
    <#--}),-->
    <#--tree = new Tree.TreeList({-->
    <#--store: store,-->
    <#--showLine: true-->
    <#--});-->

    <#--var picker = new TreePicker({-->
    <#--trigger: '#show',-->
    <#--valueField: '#hide',-->
    <#--width: 150,-->
    <#--children: [tree]-->
    <#--});-->
    <#--picker.render();-->
    <#--});-->

    /*----------------------------------------------编辑规格表单处理 begin------------------------------------*/
    var editSpecForm = new BUI.Form.Form({
        srcNode: '#editSpecForm',
        submitType: 'ajax',
        callback: function () {
            store.load();
            editSpecDialog.close();
        }
    }).render();

    var editSpecDialog = new BUI.Overlay.Dialog({
        title: '编辑产品规格',
        width: 500,
        height: 380,
        contentId: 'editSpecContent',
        success: function () {
            editSpecForm.ajaxSubmit();
        }
    });
    function edit(index, value) {
        var form = $("#editSpecForm")[0];
        if (index == 'insert') {
            editSpecDialog.show();
            BUI.FormHelper.setField(form, "productID", value);
        }
        else {
            BUI.FormHelper.setFields(form, store.findByIndex(index));
            editSpecDialog.show();
        }

    }
    function addFunction() {
        edit("insert", grid.getFirstItem().productID);
    }
    //删除选中的记录
    function delFunction() {
        var selections = grid.getSelection();
        var ids = [];
        for (var i = 0; i < selections.length; i++) {
            ids[i] = selections[i].id.toString()
        }
        $.ajax({
            type: "POST",
            url: "${basepath}/manage/product/deletesSpec",
            dataType: "json",
            data: {
                ids: ids
            },
            success: function () {
                store.load();
                editSpecDialog.close();
            }
        });
    }
    $(document).on('click', ".image", function () {
        $(this).parents(".imgBox").remove();
    })
    /*----------------------------------------------编辑规格表单处理 end------------------------------------*/

    //    类目下拉
    //一级商品目录下拉
    var Select = BUI.Select;

    var pStore = new Store({
        url: '${basepath}/manage/catalog/getParentCatalog',
        autoLoad: true,
        root: 'data',
    });
    var pSelect = new Select.Select({
        render: '#p-catalog',
        valueField: '#p-value',
        list: {
            itemTpl: '<li >{name}</li>',
            idField: 'name'
        },
        store: pStore
    }).render();

    var subStore = new Store({
        url: '/manage/catalog/getCatalog',  //设置加载数据的URL
        autoLoad: true, //创建Store时自动加载数据
        proxy: {
            method: 'GET',
            dataType: 'json'
        },
        root: 'data'
    })
    var subSelect = new Select.Select({
        render: '#sub-catalog',
        valueField: '#sub-value',
        list: {
            itemTpl: '<li>{name}</li>',
            idField: 'id'
        },
        store: subStore
    });
    subSelect.render();
    pSelect.on('change', function (e) {
        var id = e.item.id;
        //获取二级下拉数据源      查询代参 通过 对象设置相应属性参数，传对象。
        var obj = new Object();
        obj.pid = id;
        subStore.load(obj);       //接收对象参数
    });
    subSelect.disable();
    pSelect.disable();

</script>
</@page.pageBase>
